<template>
	<view class="confirm">
		<view class="tip">支付的费用将托管在平台，确认验收后再打款给师傅</view>
		<!-- 上门地址 -->
		<view class="choose common" @click="ToAddress">
			<view class="icon-view">
				<u-icon name="map" color="#FFF" size="25rpx" top="0rpx" />
			</view>
			<view class="name">{{newAddress}}</view>
			<view class="right-arrow">
				<u-icon name="arrow-right" color="#D8D8D8" />
			</view>
		</view>
		<!-- 上门时间 -->
		<view class="choose common" @click="getOrdertime">
			<view class="icon-view">
				<u-icon name="clock" size="34rpx" color="#FFF" />
			</view>
			<view class="name">{{coupon.door_time}}</view>
			<view class="right-arrow">
				<u-icon name="arrow-right" color="#D8D8D8" />
			</view>
		</view>
		<view class="gap" />
		<view class="products common">
			<view class="product-item">
				<view class="info-left">
					<image class="img" :src="order.images" mode="aspectFill" />
					<view class="price">
						<view class="name">{{ order.title }}</view>
						<view class="time">服务时间:{{order.newservice}}</view>
						<view class="spce">服务规格:{{order.newspce}}</view>
						<view class="num">￥{{order.price}}<text class="utn">/台</text></view>
					</view>
				</view>
				<view class="info-right">
					<u-icon name="minus-circle" :class="coupon.count > 1 ? 'open' : 'close'" size="40rpx"
						@click="amountsub">
					</u-icon>
					<view class="quanti">{{coupon.count}}</view>
					<u-icon name="plus-circle" color="#686868" size="40rpx" @click="amountadd"></u-icon>
				</view>
			</view>
		</view>
		<view class="gap" />
		<view class="insure common">
			<!-- 		<view class="insure-item">
				<view class="left">
					<view class="left1">意外保</view>
					<view class="left2">全面保证您的人身财产安全</view>
				</view>
				<view class="right">
					<view class="right1 red">¥0.00</view>
					<view class="right2">平台免费赠送</view>
				</view>
			</view> -->
			<view class="insure-item">
				<view class="left">
					<view class="left1">订单总额</view>
				</view>
				<view class="right">
					<view class="right1">¥ {{ newprice }}</view>
				</view>
			</view>
			<view class="insure-item itemtwo" @click="Toticket">
				<view class="left">
					<view class="left1">优惠券</view>
				</view>
				<view class="right ">
					<view class="right1 gray">
						{{subamount}}
						<u-icon name="arrow-right" />
					</view>
				</view>
			</view>
			<view class="insure-item">
				<view class="left">
					<view class="left1 orange">应付</view>
				</view>
				<view class="right">
					<view class="right1" v-if="subprice != 'NaN'">¥ {{subprice}}</view>
					<view class="right1" v-else>¥ {{newprice}}</view>
				</view>
			</view>
		</view>
		<view class="gap" />
		<view class="message common">
			<view class="message-title">订单留言</view>
			<view class="content">
				<textarea v-model="coupon.remark" auto-height placeholder="补充描述您的需求，或其他特殊情况…" />
			</view>
		</view>
		<view class="gap" />
		<view class="bill common">
			<view>发票说明</view>
			<view class="bill-right" @click="invoshow = true">平台提供订单凭证</view>
		</view>
		<view class="pay common">
			<view class="pay1" v-if="subprice != 'NaN'">¥ {{subprice}}</view>
			<view class="pay1" v-else>¥ {{newprice}}</view>
			<view class="pay2" @click="dopay">去支付</view>
		</view>

		<!-- 选择时间的弹窗 -->
		<u-popup class="popup" v-model="show" mode="bottom" border-radius="20">
			<view class="pop-title">请选择可上门时间</view>
			<view class="pop-tips">师傅接单后电话与您确认最终上门时间</view>
			<view class="scrll-box">
				<!-- 左 -->
				<scroll-view class="scroll-left">
					<view :class="['left-items', i === itmactive ? 'itmactive' : ''] " v-for="(item,i) in Ordertime"
						:key="i" @click="clicktimes(i,item)">{{item.xq}}
						{{item.date_jl}}
					</view>
				</scroll-view>
				<!-- 右 -->
				<scroll-view class="scroll-right">
					<view :class="['rig-items', index === acttwo ? 'acttwo' : '']" v-for="(item,index) in timeChild"
						:key="index" @click="dotims(index,item)">{{item}}</view>
				</scroll-view>
			</view>
		</u-popup>
		<!-- 发票弹窗 -->
		<u-popup class="popuptwo" v-model="invoshow" mode="bottom" border-radius="20">
			<view class="title-box">


				<view :class="['title', invois ? 'titaiv' :'']" @clcik="invois = true">个人</view>
				<view :class="['title', invois == false ? 'titaivtwo' :'']" @click="invois = false">企/事业单位</view>
				<!-- 	<view :class="['title',invois ? 'titaiv' : 'titaivtwo']" @click="dotitle(i)">
					{{item}}
				</view> -->

			</view>
			<view class="mian" v-if="invois">
				<!-- 1 -->
				<view class="mianbox">
					<view class="main-title">姓名:</view>
					<view class="input-box">
						<input type="text" v-model="coupon.invoice.name" placeholder="请填写名称" class="input"
							maxlength="10" />
					</view>
				</view>
				<view class="mianbox">
					<view class="main-title">手机号:</view>
					<view class="input-box">
						<input type="text" v-model="coupon.invoice.mobel" placeholder="请填写手机号" class="input"
							maxlength="11" />
					</view>
				</view>
				<view class="price-box" v-if="subprice != 'NaN'">可开发票金额：{{subprice}}</view>
				<view class="price-box" v-else>可开发票金额：{{newprice}}</view>
				<view class="bom">
					<button class="bom-btnone" @click="invoshow = false">取消</button>
					<button class="bom-btntwo" @click="doinvoiceone">确定</button>
				</view>
			</view>
			<!-- 2 -->
			<view class="mian miantwo" v-else>
				<view class="mianbox">
					<view class="main-title">姓名:</view>
					<view class="input-box">
						<input type="text" v-model="coupon.invoice.name" placeholder="请填写名称" class="input"
							maxlength="10" />
					</view>
				</view>
				<view class="mianbox">
					<view class="main-title">手机号:</view>
					<view class="input-box">
						<input type="text" v-model="coupon.invoice.mobel" placeholder="请填写手机号" class="input"
							maxlength="11" />
					</view>
				</view>
				<view class="mianbox">
					<view class="paytax">纳税人识别号:</view>
					<view class="main-title"></view>
					<view class="input-box">
						<input type="text" v-model="coupon.invoice.identify" placeholder="请填写纳税人识别号"
							class="input inputs" maxlength="25" />
					</view>
				</view>
				<view class="price-box" v-if="subprice != 'NaN'">可开发票金额：{{subprice}}</view>
				<view class="price-box" v-else>可开发票金额：{{newprice}}</view>
				<view class="bom">
					<button class="bom-btnone" @click="invoshow = false">取消</button>
					<button class="bom-btntwo" @click="doinvoicetwo">确定</button>
				</view>
			</view>

		</u-popup>
	</view>
</template>

<script>
	import { ResCreate, ResOrdertime, ResBefore, ResPay, ResAddressList } from '@/untils/api.js'
	export default {
		data() {
			return {
				titleList: ['个人', '企/事业单位'],
				invoshow: false,
				// aivindex: 0,
				invois: true,
				texts: '',
				acttwo: '',
				itmactive: 0,
				message: '',
				currentIndex: 0,
				show: false,
				timeIndex: 0,
				Ordertime: [],
				timeChild: [],
				order: {},
				date: '',
				newAddress: '请选择上门地址',
				subamount: '请选择优惠券',
				coupon: {
					id: '', // 服务id
					name: '', // 服务时间
					item: '', // 规格名称
					count: 1, // 购买数量
					coupon_id: '', // 优惠券id
					address_id: '', // 地址
					door_time: '请选择上门时间', // 期望上门时间
					remark: '', // 订单备注
					invoice: { // 发票信息
						name: '',
						mobel: '',
						identify: ''
					},
				},
				orderObj: {
					orderNo: ''
				},
				payprice: '',
				Defaress: [],
			}
		},

		onLoad(option) {
			this.order = JSON.parse(decodeURIComponent(option.order))
			this.coupon.id = this.order.id
			this.coupon.name = this.order.newservice
			this.coupon.item = this.order.newspce


			// 选中的地址
			uni.$on('getaddress', (data) => {
				this.coupon.address_id = data.address_id,
					this.newAddress = data.newAddress
			})

			// 选中的优惠券
			uni.$on('getsubamount', (data) => {
				console.log(data, '===满减金额');
				this.subamount = data.subamount
				this.coupon.coupon_id = data.coupon_id
			})
			// 请求地址列表
			this.getAddressList()

		},
		computed: {
			newprice() {
				return (this.order.price * this.coupon.count).toFixed(2)

			},
			subprice() {
				return (this.newprice - this.subamount).toFixed(2)
			}

		},
		methods: {
			doinvoiceone() {
				let reg = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/;
				if (!this.coupon.invoice.name) return uni.$showMsg('请输入姓名')
				if (!this.coupon.invoice.mobel) return uni.$showMsg('请输入手机号')
				if (!reg.test(this.coupon.invoice.mobel)) return uni.$showMsg('手机号格式不对')
				this.invoshow = false
			},
			doinvoicetwo() {
				let reg = /^((13[0-9])|(14[0-9])|(15[0-9])|(17[0-9])|(18[0-9]))\d{8}$/;
				if (!this.coupon.invoice.name) return uni.$showMsg('请输入姓名')
				if (!this.coupon.invoice.mobel) return uni.$showMsg('请输入手机号')
				if (!this.coupon.invoice.identify) return uni.$showMsg('请输入纳税人识别号')
				if (!reg.test(this.coupon.invoice.mobel)) return uni.$showMsg('手机号格式不对')
				this.invoshow = false
			},
			// dotitle() {
			// 	// this.aivindex = i
			// 	this.invois = true

			// 	if (i == 0) {} else {
			// 		this.invois = false
			// 	}
			// },
			async getAddressList() {
				const { data: res } = await ResAddressList()
				// 过滤默认项
				this.Defaress = res.data.rows.filter(item => {
					return item.isDefault === 1
				})
				this.newAddress = this.Defaress[0].city + this.Defaress[0].remark + this.Defaress[0].house_number
				this.coupon.address_id = this.Defaress[0].id
			},
			async dopay() {
				if (this.coupon.door_time === '请选择上门时间') return uni.$showMsg('请选择上门时间！')
				if (this.orderObj.orderNo) return

				// 订单预申请
				const { data: res } = await ResBefore(this.coupon)
				if (res.code != 1) return uni.$showMsg(res.msg)
				this.payprice = res.data.price
				console.log(res, '订单预申请');

				// 创建订单
				const { data: resb } = await ResCreate(this.coupon)
				if (resb.code != 1) return uni.$showMsg(resb.msg)
				this.orderObj.orderNo = resb.data.orderNo
				console.log(resb, '创建订单');

				// 发起支付
				const { data: resc } = await ResPay(this.orderObj)
				let payInfo = resc.data
				console.log(resc, '发起支付');

				//uni发起微信支付
				wx.requestPayment({
					timeStamp: payInfo.timeStamp,
					nonceStr: payInfo.nonceStr,
					package: payInfo.package,
					signType: payInfo.signType,
					paySign: payInfo.paySign,

					success: (res) => {
						let that = this
						uni.navigateTo({
							url: `/pages/Home/Pay?price=${this.payprice}`
						})
					},
					fail: (res) => {
						uni.$showMsg('用户已取消支付！')
						uni.switchTab({
							url: '/pages/Order/Order'
						})
					}
				})

			},
			Toticket() {
				// 获取发送优惠券参数
				let discObj = {
					id: this.order.id,
					name: this.order.newservice,
					item: this.order.newspce
				}
				uni.navigateTo({
					url: `/pages/Discount/Mydiscount?data=${JSON.stringify(discObj)}&ispre=true`
				})
				uni.setNavigationBarTitle({
					title: '选择优惠券'
				})
			},
			// 加减按钮
			amountsub() {
				if (this.coupon.count > 1) {
					this.coupon.count--
				}
			},
			amountadd() {
				this.coupon.count++
			},
			// 选择日期
			clicktimes(i, item) {
				console.log(item);
				this.itmactive = i
				this.timeChild = this.Ordertime[i].child
				this.date = item.date
			},
			// 选择时间
			dotims(index, item) {
				console.log(item);
				this.acttwo = index
				this.coupon.door_time = this.date + ' ' + item
				this.show = false
			},
			async getOrdertime() {
				this.show = true
				const { data: res } = await ResOrdertime()
				this.Ordertime = res.data
				this.timeChild = res.data[0].child
				console.log(res, '上门时间');
				// 打开弹窗默认拿到第一项的时间
				this.date = this.Ordertime[0].date
			},
			ToAddress() {
				let wayis = true
				uni.navigateTo({
					url: `/pages/Address/Address?wayis=${wayis}`
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.common {
		padding: 0 24rpx;
		box-sizing: border-box;
	}

	.confirm .tip {
		height: 62rpx;
		line-height: 62rpx;
		background-color: #FAF5F1;
		padding-left: 22rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #CF8753;
	}

	.confirm .choose {
		padding: 38rpx 30rpx;
		display: flex;
		align-items: center;
	}

	.confirm .choose .icon-view {
		width: 34rpx;
		height: 34rpx;
		background: #01C3A8;
		border-radius: 50%;
		text-align: center;
		line-height: 30rpx;
	}

	.confirm .choose .name {
		margin-left: 10rpx;
		font-size: 28rpx;
		color: #363636;
	}

	.active {
		font-size: 34rpx !important;
		font-weight: 500 !important;
		color: #01C3A8 !important;
	}

	.confirm .choose .right-arrow {
		flex: 1;
		text-align: right;
	}

	.gap {
		width: 100%;
		height: 14rpx;
		background: #FAFAFA;
	}



	.confirm .products .product-item {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx 20rpx 10rpx;
	}

	.info-left {
		display: flex;

		.img {
			width: 130rpx;
			height: 130rpx;
			margin-right: 20rpx;
		}

		.price {


			.name {
				font-size: 30rpx;
				font-weight: 400;
				color: #363636;
			}

			.time,
			.spce {
				font-size: 22rpx;
				color: #C2C6C7;
			}

			.num {
				font-size: 26rpx;
				font-weight: 400;
				// margin-top: 10rpx;
				color: #DB5750;

				.utn {
					font-size: 18rpx;
					vertical-align: middle;
				}
			}


		}
	}

	.info-right {
		text-align: right;
		display: flex;

		.open {
			color: #686868;
		}

		.close {
			color: #E0E0E0;
		}

		.quanti {
			padding: 0 20rpx;
		}
	}

	.confirm .insure-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx 0;
		padding: 0 30rpx 0 10rpx;
	}

	.itemtwo {
		padding-right: 10rpx !important;
	}

	.confirm .insure-item .left .left1 {
		font-size: 28rpx;
		font-weight: 400;
		color: #383838;
	}

	.confirm .insure-item .left .left2 {
		font-size: 24rpx;
		font-weight: 400;
		color: #929292;
	}

	.confirm .insure-item .right {
		text-align: right;
	}

	.confirm .insure-item .right .right1 {
		font-size: 26rpx;
		font-weight: 400;
	}

	.red {
		color: #F25855;
	}

	.gray {
		color: #C2C6C7;
	}

	.orange {
		color: #DF6241;
	}

	.confirm .insure-item .right .right2 {
		font-size: 24rpx;
		font-weight: 400;
		color: #333333;
	}

	.confirm .message .message-title {
		margin: 28rpx 0;
		font-size: 28rpx;
		font-weight: 500;
		color: #383838;
	}

	.confirm .message .content {
		width: 100%;
		height: 217rpx;
		background: #F7F7F7;
		border-radius: 24rpx;
		padding: 18rpx 24rpx;
		margin-bottom: 40rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.confirm .bill {
		display: flex;
		justify-content: space-between;
		margin: 28rpx 0 0;
		font-size: 28rpx;
		font-weight: 400;
		color: #383838;
		padding: 0 20rpx 50rpx;

		.bill-right {
			margin-right: 20rpx;
			z-index: 99;
		}
	}


	.confirm .pay {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 28rpx;
	}

	.confirm .pay .pay1 {
		font-size: 38rpx;
		font-weight: 500;
		color: #F56803;
	}

	.confirm .pay .pay2 {
		width: 210rpx;
		height: 84rpx;
		background: #01C3A8;
		border-radius: 42rpx;
		text-align: center;
		line-height: 84rpx;
		font-size: 30rpx;
		color: #F8FEFF;
	}


	/* 时间弹出框 */
	.popup {
		text-align: center;

		.pop-title {
			padding: 30rpx 0;
			font-size: 32rpx;
			font-weight: 700;
			color: #0B0B0B;
		}

		.pop-tips {
			background: #FAF5F1;
			font-size: 24rpx;
			font-weight: 400;
			color: #FB8B2C;
			padding: 15rpx 0;
		}

		.scrll-box {
			display: flex;

			.scroll-left {
				width: 250rpx;
				background-color: #F8F9FB;

				.left-items {
					line-height: 100rpx;
				}

				.itmactive {
					background-color: #fff;
					position: relative;

					&::before {
						content: ' ';
						width: 5rpx;
						height: 42rpx;
						background: #01C3A8;
						position: absolute;
						top: 34rpx;
						left: 3rpx;
					}
				}
			}

			.scroll-right {
				flex: 1;
				background-color: #fff;
				padding-left: 40rpx;

				.rig-items {
					line-height: 90rpx;
					text-align: left;
				}

				.acttwo {
					color: #01C3A8;
				}
			}
		}

	}

	// 发票弹窗
	.popuptwo {
		font-size: 28rpx;

		.title-box {
			display: flex;

			.title {
				width: 50%;
				height: 79rpx;
				line-height: 79rpx;
				text-align: center;
				color: #01C3A8;
			}

			.titaiv {
				color: #fff;
				background-color: #01C3A8;
				border-bottom-right-radius: 80rpx;
			}

			.titaivtwo {
				color: #fff;
				background-color: #01C3A8;
				border-bottom-left-radius: 80rpx;
			}
		}

		.mian {
			padding: 25rpx 0;

			.mianbox {
				display: flex;
				align-items: center;
				padding: 0 20rpx;


				.main-title {
					width: 100rpx;
					font-weight: 700;
				}

				.input-box {
					flex: 1;
					padding: 35rpx 0;
					border-bottom: 1px solid #EBEBEB;

					.input {
						padding-left: 20rpx;
					}
				}
			}

			.price-box {
				margin: 50rpx 0;
				text-align: center;
				font-size: 26rpx;
			}

			.bom {
				display: flex;

				.bom-btnone,
				.bom-btntwo {
					width: 338rpx;
					height: 84rpx;
					line-height: 84rpx;
					background: #F7F7F7;
					border-radius: 42rpx;
					font-size: 30rpx;

				}

				button.bom-btnone::after {
					border: none;
				}

				.bom-btntwo {
					background: #01C3A8;
					color: #fff;
				}

				button.bom-btntwo::after {
					border: none;
				}
			}
		}

		.miantwo {
			.mianbox {
				position: relative;

				.paytax {
					font-weight: 700;
					position: absolute;
					top: 40rpx;
					left: 20rpx;
				}

				.input-box {
					.inputs {
						padding-left: 120rpx;
					}
				}



			}

		}


	}
</style>
